<template>
  <el-dialog v-model="visible" title="举报内容" width="500px" :before-close="handleClose">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
      <el-form-item label="举报类型" prop="reasonType">
        <el-select v-model="form.reasonType" placeholder="请选择举报类型" style="width: 100%">
          <el-option label="垃圾信息" :value="1" />
          <el-option label="违法违规" :value="2" />
          <el-option label="涉黄涉暴" :value="3" />
          <el-option label="恶意骚扰" :value="4" />
          <el-option label="其他" :value="5" />
        </el-select>
      </el-form-item>

      <el-form-item label="详细描述" prop="reasonDetail">
        <el-input
          v-model="form.reasonDetail"
          type="textarea"
          :rows="4"
          placeholder="请详细描述举报原因..."
          maxlength="500"
          show-word-limit
        />
      </el-form-item>

      <el-form-item label="目标信息" v-if="targetInfo">
        <div class="target-info">
          <div class="target-type">{{ getTargetTypeName(targetType) }}</div>
          <div class="target-content">{{ targetInfo }}</div>
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting"> 提交举报 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { createReport, type ReportCreateRequest } from "@/api/report";

// Props
interface Props {
  modelValue: boolean;
  targetType: number; // 1-帖子，2-评论，3-用户，4-悄悄话
  targetId: number;
  targetInfo?: string; // 目标内容的简要信息
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  targetInfo: "",
});

// Emits
const emit = defineEmits<{
  "update:modelValue": [value: boolean];
  success: [];
}>();

// 响应式数据
const formRef = ref<FormInstance>();
const submitting = ref(false);

const form = reactive({
  reasonType: undefined as number | undefined,
  reasonDetail: "",
});

const rules = {
  reasonType: [{ required: true, message: "请选择举报类型", trigger: "change" }],
  reasonDetail: [
    { required: true, message: "请填写详细描述", trigger: "blur" },
    { min: 10, message: "描述至少需要10个字符", trigger: "blur" },
  ],
};

// 计算属性
const visible = computed({
  get: () => props.modelValue,
  set: value => emit("update:modelValue", value),
});

// 方法
const getTargetTypeName = (type: number): string => {
  const typeMap: Record<number, string> = {
    1: "帖子",
    2: "评论",
    3: "用户",
    4: "悄悄话",
  };
  return typeMap[type] || "未知";
};

const handleSubmit = async () => {
  if (!formRef.value) return;

  try {
    await formRef.value.validate();

    submitting.value = true;

    const reportData: ReportCreateRequest = {
      targetType: props.targetType,
      targetId: props.targetId,
      reasonType: form.reasonType || 1,
      reasonDetail: form.reasonDetail,
    };

    await createReport(reportData);

    ElMessage.success("举报提交成功，我们会尽快处理");
    emit("success");
    handleClose();
  } catch (error: any) {
    console.error("提交举报失败:", error);
    ElMessage.error(error.message || "举报提交失败");
  } finally {
    submitting.value = false;
  }
};

const handleClose = () => {
  visible.value = false;
  resetForm();
};

const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
  form.reasonType = undefined;
  form.reasonDetail = "";
};
</script>

<style scoped lang="scss">
.target-info {
  padding: 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  border: 1px solid #e4e7ed;

  .target-type {
    font-size: 12px;
    color: #909399;
    margin-bottom: 4px;
  }

  .target-content {
    font-size: 14px;
    color: #606266;
    line-height: 1.4;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}

.dialog-footer {
  text-align: right;
}
</style>
